<template>
  <div>
    <!-- 使用 v-model 实现双向数据绑定 -->
    <input v-model="inputValue" placeholder="请输入内容">
    <!-- 使用 v-bind 绑定按钮的禁用状态 -->
    <button :disabled="isButtonDisabled" v-on:click="handleClick">点击更新信息</button>
    <!-- 展示输入框中的内容 -->
    <p>你输入的内容是: {{ inputValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const inputValue = ref('');
const isButtonDisabled = ref(false);

// 处理按钮点击事件
const handleClick = () => {
  if (inputValue.value.trim() === '') {
    isButtonDisabled.value = true;
    alert('请输入有效的内容');
  } else {
    isButtonDisabled.value = false;
    console.log('你输入的内容是:', inputValue.value);
  }
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>